<style>
	#calculate {
		line-height: 60px;
		text-align: center;
		background: #ccc;
		font-size: 16px;
		font-weight: bold;
	}
	
	#calculate tbody input {
		width: 100%;
		height: 60px;
		background: #033;
		color: #fff;
		font: bold 16px/1em 'Microsoft yahei';
	}
	
	#calculate tbody td {
		width: 25%;
		background: #fff;
	}
	
	#calculate_outPut {
		font-size: 20px;
		letter-spacing: 2px;
		background: #fff;
		height: 40px;
		border: none;
		text-align: right;
		width: 100%;
	}
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" id="calculate">
	<thead>
		<tr>
			<td colspan="4" align="right"><input id="calculate_outPut" value="0" disabled="disabled"></td>
		</tr>
	</thead>
	<tbody id="calculate_num">
		<tr>
			<td><label> 
<input type="button" name="button" id="button" value="7" _type='num' /> 
</label></td>
			<td><input type="button" value="8" _type='num' /></td>
			<td><input type="button" value="9" _type='num' /></td>
			<td><input type="button" value="/" _type='op' /></td>
		</tr>
		<tr>
			<td><input type="button" value="4" _type='num' /></td>
			<td><input type="button" value="5" _type='num' /></td>
			<td><input type="button" value="6" _type='num' /></td>
			<td><input type="button" value="*" _type='op' /></td>
		</tr>
		<tr>
			<td><input type="button" value="1" _type='num' /></td>
			<td><input type="button" value="2" _type='num' /></td>
			<td><input type="button" value="3" _type='num' /></td>
			<td><input type="button" value="-" _type='op' /></td>
		</tr>
		<tr>
			<td><input type="button" value="0" _type='num' /></td>
			<td><input type="button" value="+/-" _type='+/-' /></td>
			<td><input type="button" value="." _type='.' /></td>
			<td><input type="button" value="+" _type='op' /></td>
		</tr>
		<tr>
			<td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
			<td><input type="button" value="C" _type='cls' /></td>
			<td><input type="button" value="=" _type='eval' /></td>
		</tr>
	</tbody>
</table>
<script>
	//计算对象 
	var operateExp = {
		'+': function(num1, num2) {
			return num1 + num2;
		},
		'-': function(num1, num2) {
			return num1 - num2;
		},
		'*': function(num1, num2) {
			return num1 * num2;
		},
		'/': function(num1, num2) {
			return num2 === 0 ? 0 : num1 / num2;
		}
	}
	//计算函数 
	var operateNum = function(num1, num2, op) {
		if(!(num1 && num2)) return;
		//保证num1,num2都为数字 
		num1 = Number(num1);
		num2 = Number(num2);
		//不存在操作符,返回num1; 
		if(!op) return num1;
		//匹配运算公式 
		if(!operateExp[op]) return 0;
		return operateExp[op](num1, num2);
	}
	//显示面板 
	var calculate_outPut = document.getElementById("calculate_outPut");
	//操作面板 
	var calculate_num = document.getElementById("calculate_num");
	var result = 0; //计算结果 
	var isReset = false; //是否重新设置 
	var operation; //操作符 
	//设置显示屏的值 
	function setScreen(num) {
		calculate_outPut.value = num;
	}
	//获取显示屏的值 
	function getScreen() {
		return calculate_outPut.value;
	}
	//添加点击事件 
	calculate_num.onclick = function(e) {
		var ev = e || window.event;
		var target = ev.target || ev.srcElement;
		if(target.type == "button") {
			var mark = target.getAttribute("_type"); //获取当前点击button的自定义的属性。 
			var value = target.value; //获取当前的值 
			var num = getScreen(); //获取当前框的值 
			if(mark === 'bs') { //退格键 
				if(num == 0) return;
				var snum = Math.abs(num).toString();
				if(snum.length < 2)
					setScreen(0);
				else
					setScreen(num.toString().slice(0, -1));
			}
			if(mark === 'num') { //数字键 
				if(num === '0' || isReset) { //有操作符或显示屏为0 
					setScreen(value);
					isReset = false;
					return;
				}
				setScreen(num.toString().concat(value));
			}
			if(mark === ".") { //小数点 
				var hasPoint = num.toString().indexOf(".") > -1;
				if(hasPoint) {
					if(isReset) {
						setScreen("0" + value);
						isReset = false;
						return;
					}
					return;
				}
				setScreen(num.toString().concat(value));
			}
			if(mark === "+/-") { //正负号 
				setScreen(-num);
			}
			if(mark === "op") { //如果点击的是操作符则设计第一个操作数 
				if(isReset) return;
				isReset = true;
				if(!operation) {
					result = +num;
					operation = value;
					return;
				}
				result = operateNum(result, num, operation);
				setScreen(result);
				operation = value;
			}
			if(mark === "cls") { //清零 
				result = 0;
				setScreen(result);
				isReset = false;
			}
			if(mark === "eval") { //计算 
				if(!operation) return;
				result = operateNum(result, num, operation);
				setScreen(result);
				operation = null;
				isReset = false;
			}
		}
	}
</script>
View Code